import React, { useEffect, useState } from 'react'
import { useModel } from '@umijs/max'
import { Spin, Checkbox, Space, Button } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import styles from './SelfPickup.less'

export default ({ list, reloadData, loading }) => {
  useEffect(() => {}, [])

  const goAddPickup = () => {
    window.open('/pickupPoint?type=1')
  }

  return (
    <>
      {list && list.length ? (
        <div className={styles.mask_wrapper}>
          <Space direction='vertical' style={{ paddingTop: '5px' }}>
            {list.map((i, idx) => (
              <Checkbox checked key={idx}>
                {i.address}
              </Checkbox>
            ))}
          </Space>
        </div>
      ) : (
        <Space direction='vertical' style={{ width: '260px' }}>
          <Spin size='large' tip='获取中' spinning={loading}>
            <div className={styles.self_pickup_empty_block}>
              <img
                className={styles.self_pickup_empty_icon}
                src='https://blzjimg.0123china.cn/images/self_pickup_point_empty.png'
              ></img>
              <div className={styles.self_pickup_empty_tip}>暂无自提点，如需新增请</div>
              <div className={styles.self_pickup_empty_tip}>
                点击下方新增保存后<a onClick={reloadData}>点击此处</a>刷新
              </div>
            </div>
            <Button icon={<PlusOutlined />} type='primary' ghost style={{ width: '260px' }} onClick={goAddPickup}>
              新增自提点
            </Button>
          </Spin>
        </Space>
      )}
    </>
  )
}
